<template>
  <div class="container">
    <uv-navbar bg-color="linear-gradient(to right, #fef8ee, #e9fdf9)" rightIcon="arrow-leftward" :autoBack="true" :placeholder="true" leftText="我参加的活动">
      <template v-slot:right>
        <view class="uv-nav-slot" :style="iconStyle()">
          <view class="map flex fz12">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283509915568554.png" width="16px" height="16px"></uv-image>
            <text>北京市</text>
          </view>
        </view>
      </template>
    </uv-navbar>

    <swiper :indicator-dots="true" class="swiper" :current="current" v-if="current">
      <swiper-item v-for="(item, index) in months" :key="index">
        <uv-grid :border="false" align="center">
          <uv-grid-item v-for="(el, idx) in item" :index="idx" :key="idx" @click="monthClick(el.month)">
            <view class="month fz20 bold" :class="{active: currentMonth == el.month}">{{el.format}}</view>
          </uv-grid-item>
        </uv-grid>
      </swiper-item>
    </swiper>
    <uv-calendars insert @change="calendarsChange" :date="date" class="joinCalendars" />

    <!-- <activityItem></activityItem> -->
  </div>
</template>

<script setup lang="ts">
import activityItem from "@/pages/tabbar/tabbar-1/components/activityItem.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let currentData = ref(new Date());
let currentMonth = ref(null);
let current = ref(null);
let date = ref("");
let fulldate = "";

onShow(() => {
  getCurrentData();
});

function getCurrentData() {
  var d = new Date(currentData.value);
  currentMonth.value = d.getMonth() + 1;
  for (let index = 0; index < months.value.length; index++) {
    const element = months.value[index];
    for (let j = 0; j < element.length; j++) {
      const item = element[j];
      if (item.month == currentMonth.value) {
        current.value = index;
      }
    }
  }
}

let months = computed(() => {
  let arr = [];
  for (let index = 1; index <= 12; index++) {
    arr.push({
      month: index,
      format: `${proxy.$utils.numberToChinese(index)}月`,
    });
  }
  let newArr = proxy.$utils.chunkArray(arr, 3);
  console.log("months", newArr);
  return newArr;
});

function iconStyle() {
  let right = 0;
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  right = menuButtonInfo.width;
  // #endif
  return {
    paddingRight: `${right}px`,
  };
}

function monthClick(index) {
  let day = proxy.$utils.dateTimeFormateFn(new Date());
  if (fulldate) day = fulldate;
  date.value = changeMonth(day, index);
  currentMonth.value = index;
}

function changeMonth(date, newMonth) {
  const newDate = new Date(date);
  newDate.setMonth(newMonth - 1);
  return proxy.$utils.dateTimeFormateFn(newDate);
}

function calendarsChange(e) {
  console.log("选择日期", e);
  fulldate = e.fulldate;
}
</script>


<style lang="scss">
page {
  background: linear-gradient(to right, #fef8ee, #e9fdf9);
}
.uv-calendar__content {
  background-color: transparent !important;
}
</style>
<style lang="scss" scoped>
.map {
  text {
    padding-left: 2px;
  }
}
.swiper {
  height: 100px;
  .month {
    color: #c5cee0;
    line-height: 100px;
    font-size: 24px;
  }
  .active {
    color: #48d4ff !important;
  }
}
</style>
